<!doctype html>
<html>
<head>
<title>Radial Gradient</title>
	<script src="../../dist/chart.js"></script>
	<script src="../utils.js"></script>
	<style>
		canvas {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
		}
	</style>
</head>

<body>
	<div style="width: 75%;">
		<canvas id="canvas"></canvas>
	</div>
	<br>
	<br>
	<button id="randomizeData">Randomize Data</button>
	<script>
		var cache = new Map();
		var width = null;
		var height = null;

		function createRadialGradient3(context, c1, c2, c3) {
			var chartArea = context.chart.chartArea;
			if (!chartArea) {
				// This case happens on initial chart load
				return null;
			}

			var chartWidth = chartArea.right - chartArea.left;
			var chartHeight = chartArea.bottom - chartArea.top;
			if (width !== chartWidth || height !== chartHeight) {
				cache.clear();
			}
			var gradient = cache.get(c1 + c2 + c3);
			if (!gradient) {
				// Create the gradient because this is either the first render
				// or the size of the chart has changed
				width = chartWidth;
				height = chartHeight;
				var centerX = (chartArea.left + chartArea.right) / 2;
				var centerY = (chartArea.top + chartArea.bottom) / 2;
				var r = Math.min(
					(chartArea.right - chartArea.left) / 2,
					(chartArea.bottom - chartArea.top) / 2
				);
				var ctx = context.chart.ctx;
				gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, r);
				gradient.addColorStop(0, c1);
				gradient.addColorStop(0.5, c2);
				gradient.addColorStop(1, c3);
				cache.set(c1 + c2 + c3, gradient);
			}

			return gradient;
		}

		var chartColors = window.chartColors;
		var colors = [chartColors.red, chartColors.orange, chartColors.yellow, chartColors.green, chartColors.blue];
		var config = {
			type: 'polarArea',
			data: {
				datasets: [{
					data: [
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
					],
					backgroundColor: function(context) {
						var c = colors[context.dataIndex];
						if (context.active) {
							c = Chart.helpers.getHoverColor(c);
						}
						var mid = Chart.helpers.color(c).desaturate(0.2).darken(0.2).rgbString();
						var start = Chart.helpers.color(c).lighten(0.2).rotate(270).rgbString();
						var end = Chart.helpers.color(c).lighten(0.1).rgbString();
						return createRadialGradient3(context, start, mid, end);
					},
					label: 'My dataset' // for legend
				}],
				labels: [
					'Red',
					'Orange',
					'Yellow',
					'Green',
					'Blue'
				]
			},
			options: {
				responsive: true,
				plugins: {
					legend: {
						position: 'right',
					},
					title: {
						display: true,
						text: 'Chart.js Polar Area Chart'
					},
				},
				scales: {
					r: {
						ticks: {
							beginAtZero: true
						},
						reverse: false
					}
				},
				animation: {
					animateRotate: false,
					animateScale: true
				}
			}
		};

		window.onload = function() {
			var ctx = document.getElementById('canvas');
			window.myPolarArea = new Chart(ctx, config);
		};

		document.getElementById('randomizeData').addEventListener('click', function() {
			config.data.datasets.forEach(function(piece, i) {
				piece.data.forEach(function(value, j) {
					config.data.datasets[i].data[j] = randomScalingFactor();
				});
			});
			window.myPolarArea.update();
		});
	</script>
</body>

</html>
